﻿var Diagram = MindFusion.Diagramming.Diagram;
var DiagramLink = MindFusion.Diagramming.DiagramLink;
var Events = MindFusion.Diagramming.Events;
var ShapeNode = MindFusion.Diagramming.ShapeNode;

var Rect = MindFusion.Drawing.Rect;
var TreeLayout = MindFusion.Graphs.TreeLayout;
var TreeLayoutLinkType = MindFusion.Graphs.TreeLayoutLinkType;


var diagram;

Sys.Application.add_load(function (sender, args) {
    // create a Diagram component that wraps the "diagram" canvas
    diagram = $create(Diagram, null, null, null, $get("diagram"));
    diagram.setLinkHeadShapeSize(2);

    // build a tree whose nodes correspond to the page DOM elements
    buildTree();

    diagram.addEventListener(Events.nodeClicked, onClickNode);
    // rearrange the tree when a branch is expanded ot collapsed
    diagram.addEventListener(Events.treeCollapsed, onCollapseNode);
    diagram.addEventListener(Events.treeExpanded, onExpandNode);
});

function buildTree() {
    // create a box that will be a root in our hierarchy
    var root = new ShapeNode(diagram);
    root.setBounds(new Rect(0, 0, 40, 40));
    root.setText("Большая вершина");
    root.setBrush("DeepSkyBlue");
    root.setExpandable(true);
    diagram.addItem(root);

    var childNode = new ShapeNode(diagram);
    childNode.setBounds(new Rect(0, 0, 20, 12));
    childNode.setText("Маленькая вершина");
    childNode.setBrush({ type: "LinearGradientBrush", color1: "LightCyan", color2: "DeepSkyBlue", angle: 30 });
    childNode.setExpandable(true);
    diagram.addItem(childNode);

    diagram.getFactory().createDiagramLink(root, childNode);

    childNode = new ShapeNode(diagram);
    childNode.setBounds(new Rect(0, 0, 20, 12));
    childNode.setText("Еще маленькая вершина");
    childNode.setBrush({ type: "LinearGradientBrush", color1: "LightCyan", color2: "DeepSkyBlue", angle: 30 });
    
    diagram.addItem(childNode);

   
    diagram.getFactory().createDiagramLink(root, childNode);

    // arrange the tree
    var treeLayout = new TreeLayout();
    treeLayout.linkType = TreeLayoutLinkType.Cascading;
    diagram.arrange(treeLayout);

    diagram.resizeToFitItems(5);
}



function onExpandNode(sender, args) {    

    var node = args.getNode();    
    alert("Раскрыт элемент " + node.getText());
    
}

function onCollapseNode(sender, args) {    

    var node = args.getNode();
    alert("Свернут элемент " + node.getText());

}

function onClickNode(sender, args) {    

    var node = args.getNode();
    if (node != null) {
        var name = node.getText();
        alert("Выделен элемент " + name);
    }
}